<template>
  <!-- 病历模板 -->
  <div class="template" v-if="isShow">
    <div class="t-dialog">
      <div class="t-dialog-head">
        <span>病历模板 <el-icon ><arrow-down /></el-icon></span>
        <!-- <div class="close">x</div> -->
      </div>
      <div class="t-dialog-content">
        <div class="search-left">
          <el-input
            class="input-1"
            placeholder="目录名称"
            v-model="filterText">
          </el-input>
          <div class="search-left-tree">
            <el-tree
              class="filter-tree"
              :data="treeData"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              @node-click="handleNodeClick"
              ref="tree">
            </el-tree>
          </div>
        </div>
        <div class="serach-detail">
          <div class="head">
              <div class="title">
                  {{temTitle}}
                </div>
                <span>{{title}}</span>
          </div>
          <div class="mains">
            <div class="tep" v-for="item in content" :key="item.title">
                <span>{{item.title}}:</span>
                <span>{{item.content}}</span>
            </div>

            <div class="tips">
              <div class="radio">
                  <el-checkbox v-model="checked"></el-checkbox>
                  <span class="read">我已阅读并同意</span>
                  <span class="agree">《电子病历模板免责协议》</span>
              </div>
              <div class="btn">
                <el-button class="btn-1" :disabled="!checked" @click="determine">确 定</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="t-dialog-footer" @click="hideDialog">
        <span>收起病历模板 <el-icon ><arrow-down /></el-icon></span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ArrowDown } from '@element-plus/icons-vue';
import { defineComponent, ref, reactive, toRefs, computed, watch} from "@vue/runtime-core";
import useRequet,{ RespData } from "../../../../hook/network"
import { ElMessage } from 'element-plus'
import { join } from 'path/posix';

import { TreeData } from "../../../../types/index"


export default defineComponent({
  components: {ArrowDown},
  props: {
    isShow: {
      type: Boolean,
      defalut: false
    },
    title: {
      type: String,
      default: '初诊病历'
    }
  },
  setup(props) {
    const request = useRequet({ path: "" })
    const content = ref([
      {
        title:'主诉',
        content:''
      },
      {
        title:'现病史',
        content:''
      },
      {
        title:'既往史',
        content:''
      },
      {
        title:'口腔检查',
        content:''
      },
      {
        title:'辅助检查',
        content:''
      },
      {
        title:'诊断',
        content:''
      },
      {
        title:'治疗计划',
        content:''
      },
      {
        title:'处置',
        content:''
      },
      {
        title:'医嘱',
        content:''
      },

    ])
    const checked = ref(false)
    const treeData = ref([] as TreeData[])
    // 模板类型
    type templateList = {
      name: string
    }
    watch(() => props.isShow, (newV, preV) => {
      if(newV) {
        getTemType()
      }
    })
    const temTitle = ref('')
    const templateList = ref([] as templateList[])
    const getTemType = () => {
      treeData.value = []
      request.sendRequest({
        address: 'sick/history/getCompanyTypeModel',
        params: {},
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg)
          templateList.value = resp.data
          recursionTree(templateList.value)
          
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg)
        },
        method: "GET",
      })
    }
    getTemType()
    const handleNodeClick = (data:any) => {
        if(data.other) {
          let obj = JSON.parse(data.other)
          content.value.forEach(item => {
            item.content = ''
            Object.keys(obj).forEach(key => {
              if(item.title === key) {
                item.content = obj[key]
              }
            })
            
          })
          temTitle.value = data.label
        }
        
      }

    const recursionTree = (arr: any[]) => {
      // 遍历最外层
      arr.forEach((i:any, index: number) => {
        // 往树形结构中添加数据
        // isType: true 代表是模板类型
        treeData.value.push({
            id: i.id,
            label: i.name,
            children: [],
            modelList: [],
            isType: true
        })
        // 有子类型的 处理
        // 第一层模板类型数据
        i.children.forEach((j: any, idx: number) => {

          treeData.value[index].children.push({
            id: j.id,
            label: j.name || j.title,
            other: j.other,
            children: [],
            modelList: [],
            isType: true
          })
          // 第二层的 模板类型数据
          if(j.children.length > 0) {
            j.children && j.children.forEach((v:any, i: number) => {
              
              treeData.value[index].children[idx].children.push({
                id: v.id,
                label: v.name,
                children: [],
                modelList: [],
                isType: true
              })

              // 第三层的 模板数据
              if(v.modelList.length > 0) {
                v.modelList && v.modelList.forEach((t: any) => {

                  treeData.value[index].children[idx].children[i].children.push({
                    id: t.id,
                    label: t.title,
                    children: [],
                    modelList: [],
                    other: t.other,
                    isType: false
                  })
                })
              }

            })
          }
          // 第二层的 模板数据
          if(j.modelList.length > 0) {
            j.modelList && j.modelList.forEach((v:any, i: number) => {
              
              treeData.value[index].children[idx].children.push({
                id: v.id,
                label: v.title,
                children: [],
                modelList: [],
                other: v.other,
                isType: false
              })

              
            })
            
          }
          
        })
        // 该类型下的模板数据
        // isType: false 代表是模板数据
        // 第一层 模板数据
        i.modelList && i.modelList.forEach((m: any) => {
          treeData.value[index].children.push({
            id: m.id,
            label: m.title,
            children: [],
            modelList: [],
            other: m.other,
            isType: false
          })
        })
        
      })
      

      console.debug(treeData.value)
    }


    return {
      content,
      request,
      templateList,
      getTemType,
      checked,
      treeData,
      handleNodeClick,
      temTitle,

    }
  },
  data() {
    return {
      filterText: '',
      
      defaultProps: {
          children: 'children',
          label: 'label',
        }
    }
  },
  watch: {
      filterText(val) {
        (this.$refs.tree as any).filter(val);
      }
  },
  methods: {
      filterNode(value: number, data:any) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },

      hideDialog() {
        //关闭 把数据暴露出去
        this.$emit('hideDialog', this.content, this.checked)
      },
      determine(){
        this.hideDialog()
      }
    },

})
</script>

<style lang="scss" scoped>
@import "@style/extend";
.template {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0,0,0, .5);
  z-index: 999;
  .t-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 500px;
    background: white;
    border-radius: $radius-2;

    .t-dialog-head {
      height: 35px;
      line-height: 35px;
      display: flex;
      width: 100%;
      // text-align: center;
      background: linear-gradient(60deg, $mainColor, $a10-Color, $a1-Color);
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      color: white;
      span {
        padding-left: 20px;
        @extend .standard-7;
        width: 100%;
        text-align: center;
        color: white;
      }
      .close {
        flex: 1;
        text-align: right;
        padding-right: 20px;
      }
    }

    .t-dialog-content {
      display: flex;
      height: calc(100% - 70px);
      padding: 10px;
      box-sizing: border-box;
      .search-left {
        width: 240px;
        box-shadow: 0 0 3px #e6e6e6, 0 0 3px #e6e6e6;
        // background: red;
        box-sizing: border-box;
        .input-1 {
          padding: 5px 10px;
          box-sizing: border-box;
        }

        .search-left-tree {
          height: 90%;
          overflow-y: auto;
        }
      }

      .serach-detail {
        background: white;
        width: calc(100% - 240px);
        margin-left: 20px;
        box-sizing: border-box;
        box-shadow: 5px 5px 10px #e9e9e9, -5px -5px 10px #e9e9e9;
        border-radius: $radius-2;
        position: relative;
        overflow: auto;
        .head {

          & > span {
            position: absolute;
            // width: 60px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            right: 10px;
            top: 5px;
            background: $mainColor;
            color: white;
            font-size: $fontSize;
            padding: 0 20px;
            border-top-left-radius: 15px;
            border-bottom-right-radius: 15px;
            border-top-right-radius: 4px;
            border-bottom-left-radius: 4px;
          }

          .title {
            text-align: center;
            height: 40px;
            line-height: 40px;
            padding-bottom: 10px;
            border-bottom: 1px solid $mainColor;
          }

        }

        .mains {
          font-size: $fontSize-1;
          height: calc(100% - 52px);
          .tep {
            padding: 10px 0;
            border-bottom: 1px dashed #e9e9e9;
            display: flex;
            box-sizing: border-box;
            & > span:first-child {
              padding-left: 10px;
              min-width: 100px;
              @extend .standard-5;
              font-size: $fontSize-1;
            }

            span {
                // color: #ccc;
                font-size: $fontSize;
                padding: 5px;
            }
          }
          
          .tips {
            .radio {
              height: 30px;
              line-height: 30px;
              text-align: center;
            }
            .read {
              padding-left: 8px;
            }
            .agree {
              color: $mainColor;
            }

            .btn {
              text-align: center;
              height: 40px;
              line-height: 40px;
              padding-bottom: 10px;
            }
          }
        }
      }
    }

    .t-dialog-footer {
      height: 35px;
      line-height: 35px;
      text-align: center;
      width: 100%;
      background-color: #fff;
      @extend .standard-7;
      position: absolute;
      bottom: 0;
      left: 0;
      border-top: 1px solid #ccc;
      cursor: pointer;
    }
  }
}

</style>